let $ = layui.jquery;

export default class Nav {
  constructor() {
    this.render();
    this.handle();
  }
  render() {
    let template = `
        <style>
        .header{
          background-image: url('./imgs/header.png');
          background-size: cover;
          background-repeat: no-repeat;
          height:60px;
          display: flex;
          justify-content:space-around;
          align-items:center;
          
        }
      
     .layui-side{
      margin-top: 20px;
    
     }
     #welcome{
      background-image: url('./imgs/bg .jpg');
      height:900px;
      font-size:60px;
      line-height:800px;
      text-align: center;


     }
        
    </style>


    <div class="layui-layout layui-layout-admin">

    <div class="layui-header header">
        <div class="layui-logo">猫眼后台管理系统</div>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img"/>
                    <span id="username"></span>
                </a>
            </li>
            <li class="layui-nav-item">
                <a id="logout">登出</a>
            </li>
        </ul>
    </div>


    <div class="layui-side layui-bg-black" style="top:40px;">
        <div
            class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item">
                    <a data-url="/information/getCarInformation" data-id="users" data-title="用户管理" class="site-demo-active" href="#/" data-type="tabAdd">用户管理</a>
                </li>
                <li class="layui-nav-item">
                    <a data-url="127.0.0.1:3000/#/movie" data-id="movies" data-title="电影管理" class="site-demo-active" href="#/movie" data-type="tabAdd">电影管理</a>
                </li>
                <li class="layui-nav-item">
                    <a data-url="/information/getRoleInformation" data-id="cinemas" data-title="院线管理" class="site-demo-active" href="#/cinema" data-type="tabAdd">院线管理</a>
                </li>
                <li class="layui-nav-item">
                    <a data-url="/news_list" data-id="soons" data-title="即将上映" class="site-demo-active" href="javascript:;" data-type="tabAdd">即将上映</a>
                </li>
                <li class="layui-nav-item">
                    <a data-url="/news_list" data-id="playingMovies" data-title="热映电影" class="site-demo-active" href="#/hotsup" data-type="tabAdd">热映电影</a>
                </li>
                <li class="layui-nav-item">
                    <a data-url="/news_list" data-id="hotMovies" data-title="热播影视" class="site-demo-active" href="#/hots" data-type="tabAdd">热播影视</a>
                </li>
                <li class="layui-nav-item">
                    <a data-url="/news_list" data-id="mateFilm" data-title="电影院线匹配" class="site-demo-active" href="#/mate" data-type="tabAdd">电影院线匹配</a>
                </li>
                <li class="layui-nav-item">
                    <a data-url="/news_list" data-id="info" data-title="资讯管理" class="site-demo-active" href="#info" data-type="tabAdd">资讯管理</a>
                </li>
            </ul>
        </div>
    </div>

    <div
        class="layui-body" style="top:50px">
        <!-- 内容主体区域 -->
        <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="welcome">欢迎使用</li>
            </ul>
            <div class="layui-tab-content" id="content">
                <!-- <div class="layui-tab-item layui-show">
                        <iframe src="" scrolling="no" frameborder="0"></iframe>
                </div> -->
                <div id="welcome" class="layui-tab-item layui-show">欢迎进入猫眼后台管理系统</div>
            </div>
        </div>
    </div>

</div>
    `;


    $("#root").html(template);
  }
  handle(){
   /*  let token="";


    //获取浏览器中的cookie
    let cookie =document.cookie;
    
   $.ajax({
     url:"/api/user/verify/whoami",//验证cookie正确性的接口地址
     type:"GET",
     success:function(res){
       //如果成功，服务器其实已经正确放心，服务器会发送正确的返回值
       //如果失败，跳转页面
      //  console.log(res.data)
       if(res.code===0){
         $("#username").text(res.data.name);
       }else{
         location.hash="#/login";
       }
     }
   })



   //用户退出

   $("#logout").on("click",function(){
     $.ajax({
       type:"GET",
       url:"/api/user/verify/loginOut",
       success:function(res){
         console.log(res);
         if(res.code===0){
           layer.msg("退出登录！！！",function(){
             setTimeout(()=>{
               location.hash="#/login";
             },2000);
           })
         }
       }
     })
   })
 */


// layui.use('element', function(){
//   var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

//   //导航点击事件
//   element.on('nav(movieNav)', function(elem){
//     layer.msg(elem.text());
//     // console.log(2);
//     var active = {
//       tabAdd: function(){
//         //新增一个Tab项
//         //判断这个Tab项是否存在
//        let Lis=$(".layui-tab-title li")
//      for(let i=0;i<Lis.length;i++){
//      if(Lis[i].innerText==elem.text()){
//        return;
//      }
//      }
//         element.tabAdd('demo', {
//           title: elem.text()
//           ,content: '内容'
//           ,id: elem.id
//         })
       
//       },
//     }
//     $('.site-demo-active').on('click', function(){
//       var othis = $(this), type = othis.data('type');
//       active[type] ? active[type].call(this, othis) : '';
//     });

    
//   });
// });

// JavaScript代码区域
layui.use('element', function () {
  var element = layui.element;
  var $ = layui.jquery;
  // 触发事件
  var active = { // 在这里给active绑定几项事件，后面可通过active调用这些事件
      tabAdd: function (url, id, name) {
          // 新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
          // 关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
          console.log(url);
          element.tabAdd('demo', {
              title: name,
              content: '<iframe data-frameid="' + id + '" scrolling="no" frameborder="0" src="' + url + '" style="width:100%;"></iframe>',
              id: id // 规定好的id
          })
          element.render('tab');

      },
      tabChange: function (id) { // 切换到指定Tab项
          element.tabChange('demo', id); // 根据传入的id传入到指定的tab项
      },
      tabDelete: function (id) {
          element.tabDelete("demo", id); // 删除
      },
      tabDeleteAll: function (ids) { // 删除所有
          $.each(ids, function (i, item) {
              element.tabDelete("demo", item); // ids是一个数组，里面存放了多个id，调用tabDelete方法分别删除
          })
      }
  };


  // 点击左侧导航栏，触发点击事件
  $('.site-demo-active').on('click', function () {
      let dataid = $(this);

      // 判断选项卡有lay-id属性的li的数目
      if ($(".layui-tab-title li[lay-id]").length <= 0) { // <0代表没有选项卡生成
          active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
      } else { // 否则判断该选项卡是否存在
          let isData = false;
          $.each($(".layui-tab-title li[lay-id]"), function () { // 如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
              if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                  isData = true;
              }
          })
          if (isData == false) { //
              active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
          }
      }
      // 不管是否新增，都跳转到要打开的选项卡
      active.tabChange(dataid.attr("data-id"));
  });

});

    
    

  }
}